<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{},~{})" >
<title>邀约来访</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="inviteCustomerForm" class="inviteCustomerForm mainPadding" style="display: none;"> 
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>电销管理</el-breadcrumb-item>
        <el-breadcrumb-item>我的客户</el-breadcrumb-item>
        <el-breadcrumb-item>预约来访</el-breadcrumb-item>
    </el-breadcrumb>   
    <el-row class="borderbox">
        <div class="inforTitle">预约来访</div>    
        <el-form :model="form" :rules="rules" ref="form" class="padding20">
            <div class="marginB20 fs16 paddingT20">来访信息</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="地区：" :label-width="formLabelWidth" prop="area">
                            <el-select v-model="form.area" placeholder="请选择" style="width: 100%;" @change="currentBusGroup" filterable>
                                <el-option
                                    v-for="item in orgAreaList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="预约时间：" :label-width="formLabelWidth" prop="reservationTime">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="form.reservationTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="分公司：" :label-width="formLabelWidth" prop="filiale">
                            <el-select v-model="form.filiale" placeholder="请选择" style="width: 100%;" @change="currentBusSale" filterable>
                                <el-option
                                    v-for="item in busGroupArr"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考察项目：" :label-width="formLabelWidth" prop="tastingItem">
                                <el-select v-model="form.tastingItem" placeholder="考察项目" style="width: 100%;" multiple filterable>
                                    <el-option
                                        v-for="item in  projectSelArr"
                                        :key="item.id"
                                        :label="item.projectName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>                    
                    <el-col :span="8">
                        <el-form-item label="商务总监：" :label-width="formLabelWidth" prop="businessDirector">
                            <el-select v-model="form.businessDirector" placeholder="请选择" style="width: 100%;" filterable>
                                <el-option
                                    v-for="item in busSaleArr"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否有邀请函：" :label-width="formLabelWidth" prop="isInviteLetter">
                            <el-select v-model="form.isInviteLetter"  style="width: 100%;" >
                                <el-option
                                        v-for="item in isInviteLetterList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="备注：" :label-width="formLabelWidth">
                            <el-input type="textarea" :rows="3" v-model="form.remark" autocomplete="off" maxlength="500"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">派车单</div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户人数：" :label-width="formLabelWidth" prop="customersNum">
                           <el-input v-model="form.customersNum" @keyup.native="number" autocomplete="off" maxlength="2" style="width: 80%;"></el-input><span style="padding-left: 10px;">人</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户电话：" :label-width="formLabelWidth" prop="customerPhone">
                           <el-input v-model="form.customerPhone" @keyup.native="number" autocomplete="off" maxlength="11" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="出发时间：" :label-width="formLabelWidth" prop="startTime">
                           <el-date-picker
                                style="width: 100%;"
                                v-model="form.startTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="客户联系人姓名：" :label-width="formLabelWidth" prop="customerName">
                           <el-input v-model="form.customerName" autocomplete="off" maxlength="10" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="接站时间：" :label-width="formLabelWidth" prop="pickUpTime">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="form.pickUpTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到站时间：" :label-width="formLabelWidth" prop="arrivalTime">
                            <el-date-picker
                                style="width: 100%;"
                                v-model="form.arrivalTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="车次/航班：" :label-width="formLabelWidth" prop="station">
                            <el-input v-model="form.station" autocomplete="off" maxlength="100" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="城市：" :label-width="formLabelWidth" prop="city">
                            <el-input v-model="form.city" autocomplete="off" maxlength="100" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="延误说明：" :label-width="formLabelWidth" prop="delayDescription">
                            <el-input type="textarea" :rows="2" v-model="form.delayDescription" autocomplete="off" maxlength="100" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="接站地：" :label-width="formLabelWidth" prop="pickUpStation">
                            <el-input  type="textarea" :rows="2" v-model="form.pickUpStation" autocomplete="off" maxlength="100" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            
            <div class="padding20 f-tac">            
                <el-button type="primary" @click="submitForm('form')"  :disabled="addBtnDisabled"   >提交</el-button>
                <el-button @click="rebackClue">取 消</el-button>
            </div> 
        </el-form> 
    </el-row>  
</div>
</body>
<!-- import Vue before Element -->
 <div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript" >
  var proSelect=[[${proSelect}]];
  var clueId=[[${clueId}]];
  var cusName=[[${cusName}]];
  var cusPhone=[[${cusPhone}]];
  var isInviteLetter = [[${isInviteLetter}]]+"";
  var hJtype = [[${hJtype}]]+"";
  var nextClueIds = [[${nextClueIds}]]+"";
  if(isInviteLetter == '' || isInviteLetter == null || isInviteLetter == 'null'){
      isInviteLetter = '1';
  }

  var  inviteCustomerVM= new Vue({
        el: '#inviteCustomerForm',
        data: function() {
            return {        
                form: {                    
                    area:'',
                    reservationTime:'',
                    filiale:'',
                    tastingItem:[],
                    businessDirector:'',
                    remark:'',
                    customersNum:'',
                    customerPhone:cusPhone,
                    startTime:'',
                    customerName:cusName,
                    pickUpTime:'',
                    arrivalTime:'',
                    station:'',
                    city:'',
                    delayDescription:'',
                    pickUpStation:'',
                    isInviteLetter: isInviteLetter
                },
                isInviteLetterList:[
                    {
                        value: '1',
                        label: '是'
                    },
                    {
                        value: '0',
                        label: '否'
                    }
                ],
                orgAreaList:[],
                busGroupArr:[],
                busSaleArr:[],
                projectSelArr:proSelect,
                formLabelWidth: '150px',
                addBtnDisabled:false,
                rules:{                    
                    customersNum: [
                        { validator:function(rule,value,callback){    
                            if(value==""){
                                callback();
                            }else{
                                if(/^\+?[1-9][0-9]*$/.test(value) == false){
                                   callback(new Error("请输入大于0的正整数"));
                                }else{
                                   callback();
                                } 
                                callback();
                            }         
                            
                        }, trigger: 'blur'}
                    ],
                    customerPhone: [
						{ required: true, message: '客户电话不能为空', trigger: 'blur' },
                        { validator:function(rule,value,callback){  
                            if(value==""){
                                callback();
                            }else{
                                if(/^[0-9]*$/.test(value) == false){
                                   callback(new Error("请输入数字"));
                                }else{
                                   callback();
                                } 
                                callback();
                            } 
                        }, trigger: 'blur'}
                    ],
                    customerName: [
						{ required: true, message: '客户联系人姓名不能为空', trigger: 'change' }
                    ],
                	area: [
                        { required: true, message: '地区不能为空', trigger: 'change' }
                    ],
                    filiale: [
                        { required: true, message: '分公司不能为空', trigger: 'change' }
                    ],
                    businessDirector: [
                        { required: true, message: '商务总监不能为空', trigger: 'change' }
                    ],
                    reservationTime: [
                        { required: true, message: '预约时间不能为空', trigger: 'change' }
                    ],
                    tastingItem: [
                        { required: true, message: '考察项目不能为空', trigger: 'change' }
                    ],
                    isInviteLetter: [
                        { required: true, message: '是否有邀请函不能为空', trigger: 'change' }
                    ]
                },
                statusOptions: [{
                    value: '0',
                    label: '推广列表'
                }, {
                    value: '1',
                    label: '电销列表'
                }]
            }        	  
        },
        methods: {
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        // 出发时间不允许大于到站时间，接站时间
                        var startTime=inviteCustomerVM.form.startTime
                        var pickUpTime=inviteCustomerVM.form.pickUpTime
                        var arrivalTime=inviteCustomerVM.form.arrivalTime
                        console.log(startTime)
                        console.log(pickUpTime)
                        console.log(arrivalTime)
                        if(pickUpTime){
                            if(startTime>pickUpTime){
                                this.$message({
                                    message: '出发时间不允许大于到站时间，接站时间',
                                    type: 'warning'
                                });
                                console.log('error submit!!');
                                return false;
                            }
                        }
                        if(arrivalTime){
                            if(startTime>arrivalTime){
                                this.$message({
                                    message: '出发时间不允许大于到站时间，接站时间',
                                    type: 'warning'
                                });
                                console.log('error submit!!');
                                return false;
                            }
                        }
                        
                        var param={};
                        param.clueId=clueId;
                        param.area=this.form.area;
                        param.reserveTime=this.form.reservationTime;
                        param.busCompay=this.form.filiale;
                        param.tasteProjectId=this.form.tastingItem.join(',');
                        param.busDirectorId=this.form.businessDirector;
                        param.remark=this.form.remark;
                        param.isInviteLetter=this.form.isInviteLetter;
                        param.cusNum=this.form.customersNum;
                        param.cusPhone=this.form.customerPhone;
                        param.cusName=this.form.customerName;
                        param.departTime=this.form.startTime;
                        param.arrivalTime=this.form.arrivalTime;
                        param.pickUpTime=this.form.pickUpTime;
                        param.flight=this.form.station;
                        param.delayMark= this.form.delayDescription;
                        param.receivedPlace=this.form.pickUpStation; 
                        param.city=this.form.city; 
                        this.addBtnDisabled=true;
                        axios.post('/tele/clueMyCustomerInfo/inviteCustomerSave',param)
                        .then(function (response) {
                        	inviteCustomerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                        		 //window.location.href="/tele/clueMyCustomerInfo/customerEditInfo?clueId="+clueId; 
                        		 window.location.href="/tele/clueMyCustomerInfo/initmyCustomer"; 
                        		 this.addBtnDisabled=false;
     		            	}});
                       });
                        // this.$message({
                        //     message: '提交成功！',
                        //     type: 'success'
                        // });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
             rebackClue(){

                 locationPost("/tele/clueMyCustomerInfo/customerEditInfo" ,  {"clueId":clueId, "hJtype":hJtype,"nextClueIds":nextClueIds});

                 // window.location.href="/tele/clueMyCustomerInfo/customerEditInfo?clueId="+clueId;
            },
             currentBusGroup(seleVal){
                //初始化商务组
                param={};
                this.form.filiale='';
              	param.parentId=seleVal;
                axios.post('/organization/organization/queryOrgByType',param).then(function (response) {
                	inviteCustomerVM.busGroupArr=response.data.data;
             });
            },
            currentBusSale(seleVal){
            	param={};
               	param.orgId=seleVal;
               	param.roleCode="SWZJ";
                param.statusList =[1,3];
                this.form.businessDirector='';
                axios.post('/user/userManager/listByOrgAndRoleAndGroups' ,param).then(function (response) {
                	inviteCustomerVM.busSaleArr=response.data.data;
                });
            },
            number(){
    　　　                                this.form.customersNum=this.form.customersNum.replace(/[^\.\d]/g,'');
               this.form.customersNum=this.form.customersNum.replace('.','');
        　                    　}
        },
        mounted(){
            document.getElementById('inviteCustomerForm').style.display = 'block';
        }
        , created(){
        	//初始化商务中心
           var param={};
          	param.orgType="11";
            axios.post('/organization/organization/queryOrgByTypeAndBusinessLine',param).then(function (response) {
            	inviteCustomerVM.orgAreaList=response.data.data;
            });
            
         /*   param={};
          	param.orgId="1";
            axios.post('listByOrgAndRole/user/userManager' ,param).then(function (response) {  
            	//mycustomVM.provinceArr=response.data.data.data;
            });*/
            
           
            
    	}
    })

  /* 跳转页面 */
  function locationPost(url, params) {
      // 创建form元素
      var temp_form = document.createElement("form");
      // 设置form属性
      temp_form .action = url;
      temp_form .target = "_self";
      temp_form .method = "post";
      temp_form .style.display = "none";
      // 处理需要传递的参数
      for (var x in params) {
          var opt = document.createElement("textarea");
          opt.name = x;
          opt.value = params[x];
          temp_form .appendChild(opt);
      }
      document.body.appendChild(temp_form);
      // 提交表单
      temp_form .submit();
  }

</script>
</html>